<template>
  <div class="shopCart">
    <van-cell title="购物车" icon="shopping-cart-o">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <div class="right">管理</div>
      </template>
    </van-cell>
    <van-empty
      v-show="isShow"
      description="购物车目前还没有商品"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
    >
      <van-button
        round
        type="danger"
        class="bottom-button"
        @click="gotoClassify"
      >
        去购物
      </van-button>
    </van-empty>
    <div class="cartList" v-for="(item, index) in lis" :key="index">
      <van-checkbox-group v-model="result" @change="onChecked">
        <van-row style="background-color: white">
          <van-col span="2" style="margin-top: 50px; margin-left: 20px">
            <van-checkbox :name="item"></van-checkbox>
          </van-col>

          <van-col span="20">
            <van-swipe-cell>
              <van-card
                :thumb="item.picUrl"
                :title="item.name"
                :desc="item.brief"
                :price="item.retailPrice | priceFormat"
                :origin-price="item.counterPrice"
                style="
                  text-align: left;
                  width: 100%;
                  margin-top: 10px;
                  font-size: 16px;
                  border: 1px solid #6cc4a1;
                "
                class="goods-card"
              >
                <template #num>
                  <van-stepper v-model="item.num" @change="onNum" />
                </template>
              </van-card>

              <template #right>
                <van-button
                  @click="del(item, index)"
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                />
              </template>
            </van-swipe-cell>
          </van-col>
        </van-row>
      </van-checkbox-group>
    </div>
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" @click="onAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      result: [], //所有复选框选中的商品
      checkedAll: false, //全选的状态
      isShow: true,
      value: 1,
    };
  },
  methods: {
    onSubmit(item, index) {
     
      this.lis.splice(index, 100);
       this.result = [];
      if (this.lis.length > 0) {
        //显示或隐藏空状态
        this.isShow = false;
      } else {
        this.isShow = true;
        this.checkedAll = false;
      }
    },
    ...mapMutations(["dellis"]),
    onNum() {
      //商品数量发生变化时触发
      localStorage.lis = JSON.stringify(this.lis);
    },
    onChecked() {
      //点击复选框，判断是否全选
      if (this.result.length == this.lis.length) {
        this.checkedAll = true;
      } else {
        this.checkedAll = false;
      }
    },
    onAll() {
      //点击全选按钮
      if (this.checkedAll) {
        //如果为false的话全部选中，否则全不选
        this.result = this.lis;
      } else {
        this.result = [];
      }
    },
    del(item, index) {
      //删除

      this.lis.splice(index, 1);
      this.checkedAll = this.result.length == this.lis.length; //删除后全选框还是全选状态
      localStorage.lis = JSON.stringify(this.lis);

      if (this.lis.length > 0) {
        //显示或隐藏空状态
        this.isShow = false;
      } else {
        this.isShow = true;
        this.checkedAll = false;
      }
    },
    gotoClassify() {
      this.$router.push({
        path: "/",
      });
    },
    back() {
      window.history.back();
    },
  },
  computed: {
    ...mapState(["lis"]),
    total() {
      //计算总价
      let total = 0;
      this.result.map((item) => {
        total += item.retailPrice * 100 * item.num;
      });
      return total;
    },
  },
  created() {
    let lis = localStorage.lis;
    if (lis) {
      this.lis = JSON.parse(lis);
    }

    if (this.lis.length > 0) {
      //显示或隐藏空状态
      this.isShow = false;
    } else {
      this.isShow = true;
    }
  },
};
</script>

<style lang="scss" scoped>
.van-submit-bar {
  position: fixed !important;
  bottom: 50px;
  background-color: #cdf0ea;
}
.right {
  color: blue;
}
.goods-card {
  background-color: white;
}

.delete-button {
  height: 100%;
}

.bottom-button {
  width: 180px;
  height: 40px;
}
</style>